<template>
  <div class="business-page">
    <c-title :hide="false" text="商户助手"></c-title>
    <div class="business-main">
      <div class="income-user flex-j-sb flex-a-c">
        <div class="flex income-user-img">
          <img :src="storeInfo.store_logo_url || emptyImage" />
          <div class="user-info flex-j-sb flex-a-c">
            <div class="name ell">{{ storeInfo.store_name }}</div>
            <div>
              <div class="designation"><text class="iconfont icon-renxiang"></text>{{ authTypeName }}</div>
            </div>
          </div>
        </div>
        <div class="toggle flex-j-c flex-a-c" @click="onOpen('business')" v-if="storeList.length >= 1">切换</div>
      </div>
      <div class="shop-manage">
        <div class="title">门店经营</div>
        <div class="shop-list flex" v-if="authType === 3 || authType === 2">
          <block v-for="(item, index) in shopList" :key="index" class="shop-item flex">
            <div @click="shopItemOn(item.navTo)">
              <van-image width="2.8125rem" height="2.9688rem" :src="item.img" />
              <p>{{ item.text }}</p>
            </div>
          </block>
        </div>
        <div class="shop-list flex" v-else>
          <block v-for="(item, index) in shopVerifierList" :key="index" class="shop-item flex">
            <div @click="shopItemOn(item.navTo)">
              <van-image width="2.8125rem" height="2.9688rem" :src="item.img" />
              <p>{{ item.text }}</p>
            </div>
          </block>
        </div>
      </div>
      <div class="statistics" v-if="authType === 3 || authType === 2">
        <div class="flex-j-sb  flex-a-c stats-head">
          <div class="title">数据统计</div>
          <div class="flex stats-right">
            <div :class="timeType === 'today' ? 'on' : ''" class="flex-a-c flex-j-c" @click="timeBusiness('today')">今日</div>
            <div :class="timeType === 'yesterday' ? 'on' : ''" class="flex-a-c flex-j-c" @click="timeBusiness('yesterday')">昨日</div>
            <div :class="timeType === '' ? 'on' : ''" class="flex-a-c flex-j-c" @click="timeBusiness('')">全部</div>
            <!--传的空字符串-->
          </div>
        </div>
        <div class="stats-content flex">
          <block v-for="(item, index) in statsList" :key="index" class="flex stats-flex">
            <div class="stats-item">
              <div class="price">{{ item.price }}</div>
              <div>{{ item.text }}</div>
            </div>
          </block>
        </div>
      </div>

      <div class="popularize" v-if="authType === 3 || authType === 2">
        <div class="title">推广资源统计</div>
        <div class="popularize-content">
          <div class="flex-a-c flex-j-sb shop-quantity">
            <div>门店附近的群数量</div>
            <div class="flex-a-c quantity-right" @click="onOpen('distance')">选择距离：{{ distance }}km<text class="iconfont icon-member-bottom"></text></div>
          </div>
          <div class="group">
            门店附近的群数量：<span>{{ groupList.group_count }}</span
            >个
          </div>
          <div class="client">
            门店附近的客户数量：<span>{{ groupList.member_count }}</span
            >个
          </div>
        </div>
      </div>

      <div class="business-swiper">
        <swiper style="width: 100%;" :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="(item, index) in slideBanner" :key="index" class="swiper-itemH">
            <div class="swiper-item " @click="slideNavTo(item.web_route)">
              <img :src="item.image_url" />
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="mb62"></div>
    </div>
    <van-popup v-model="distanceShow" @close="onClose('distance')" round position="bottom">
      <div class="distance-main">
        <div class="distance-head flex-a-c flex-j-sb">
          <div class="cancel" @click="onClose('distance')">取消</div>
          <div class="title">选择距离</div>
          <div class="affirm" @click="onAffirm">确认</div>
        </div>
        <div class="distance-content flex">
          <block v-for="(item, index) in distanceList" :key="index" class="flex flex-w">
            <div class="distance-item flex" @click="onDistance(index, item)">
              <div :class="distanceInex === index ? 'on' : ''">{{ item }}km</div>
            </div>
          </block>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="couponShow" @close="onClose('couponCode')" round position="bottom">
      <div class="distance-main">
        <div class="distance-head flex-a-c flex-j-sb">
          <div class="cancel" @click="onClose('couponCode')">取消</div>
          <div class="title">输码验券</div>
          <div class="affirm" @click="onCouponAffirm">确认</div>
        </div>
        <div class="coupon-content flex">
          <!-- <input class="weui-input" placeholder="请输入消费券编码" v-model="couponText" @input="bindCoupon" /> -->
          <van-field v-model="couponText" @input="bindCoupon" placeholder="请输入消费券编码" class="weui-input" />
        </div>
      </div>
    </van-popup>

    <van-popup v-model="businessShow" @close="onClose('business')" round position="bottom">
      <div class="business-popup">
        <div class="popup-header flex-a-c flex-j-c">
          <div class="title">切换商户</div>
          <div class="iconfont icon-guanbi" @click="onClose"></div>
        </div>
        <div class="business-list">
          <block v-for="(item, index) in storeList" :key="index">
            <div class="business-item flex-a-c flex-j-sb">
              <div class="flex-a-c">
                <van-image width="1.875rem" height="1.875rem" round :src="item.store_logo_url" />
                <span class="merchant-name">{{ item.store_name }}</span>
              </div>
              <div class="merchant-to flex-a-c flex-j-c" @click="onActiveStore(item.id)">进入</div>
            </div>
          </block>
        </div>
      </div>
    </van-popup>
    <van-dialog id="van-dialog" />
  </div>
</template>
<script>
import business_controller from "./business_controller.js";
export default business_controller;
</script>
<style scoped>
.business-page ::v-deep .van-nav-bar {
  background-color: #ff3a00;
}

.business-page ::v-deep .van-nav-bar__title {
  color: #fff;
}

.business-page ::v-deep .van-nav-bar__left .van-button {
  background-color: #ff3a00 !important;
}

.business-page ::v-deep .van-nav-bar {
  border-bottom: 1px solid #ff3a00;
}

.business-page ::v-deep .van-nav-bar .van-icon {
  color: #fff;
}

.shop-manage .title::before,
.stats-head::before,
.popularize .title::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #f2f2f2;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>
<style lang="scss" scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.mb62 {
  height: 1.9375rem;
  clear: both;
}

.flex-w {
  flex-wrap: wrap;
}

.business-page {
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/details_bg.png");
  background-size: 100% 20%;
  background-repeat: no-repeat;
  background-color: #f7f8fb;

  .business-main {
    margin: 0 0.625rem;

    .income-user {
      padding: 1.6875rem 0 0 0;

      .income-user-img {
        img {
          width: 3.4375rem;
          height: 3.4375rem;
          border-radius: 50%;
        }
      }

      .name {
        font-size: 1rem;
        font-weight: bold;
        color: #fff;
      }

      .user-info {
        margin-left: 0.4375rem;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;

        .icon-renxiang {
          color: #ff3a00;
          margin-right: 0.1875rem;
          font-size: 0.625rem;
        }

        .designation {
          font-size: 0.6875rem;
          color: #ff3a00;
          background: #fff;
          border-radius: 1.25rem;
          padding: 0.125rem 0.5rem 0.125rem 0.5rem;
        }
      }

      .toggle {
        min-width: 2.8125rem;
        width: 2.8125rem;
        height: 1.25rem;
        line-height: 1.25rem;
        text-align: center;
        background: #fff;
        font-size: 0.6875rem;
        color: #ff3e05;
        border-radius: 0.625rem;
      }
    }

    .shop-manage {
      background: #fff;
      border-radius: 0.3125rem;
      margin: 1.5625rem 0 0.625rem 0;
      padding: 0.8125rem 0.875rem 0 0.8125rem;

      .title,
      .popularize .title {
        font-size: 0.875rem;
        font-weight: bold;
        text-align: left;
        color: #ff3c02;
        padding-bottom: 0.7813rem;
        margin-bottom: 0.625rem;
        position: relative;
      }

      .shop-list {
        margin-top: 0.7188rem;
        flex-wrap: wrap;
      }

      .shop-item {
        width: 25%;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0.9375rem;

        p {
          font-size: 0.75rem;
          font-weight: bold;
          color: #373737;
        }
      }
    }

    .statistics {
      margin-bottom: 0.625rem;
      padding: 0.8125rem 0.875rem 0.8438rem 0.8125rem;
      background: #fff;
      border-radius: 0.3125rem;

      .stats-head {
        padding-bottom: 0.7813rem;
        position: relative;

        .title {
          font-size: 0.875rem;
          font-weight: bold;
          color: #ff3c02;
        }

        .stats-right {
          font-size: 0.6875rem;
          font-weight: bold;
          color: #6d6d6d;
          border: 0.0625rem solid #d9d9d9;
          border-radius: 0.125rem;

          div {
            width: 2.5rem;
            height: 1.3125rem;
            line-height: 1.3125rem;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;

            &:nth-child(1) {
              border-right: 0.0625rem solid #d9d9d9;
            }

            &:nth-child(2) {
              border-right: 0.0625rem solid #d9d9d9;
            }
          }

          .on {
            background: #ff3c02;
            color: #fff;
          }
        }
      }

      .stats-content {
        margin-top: 0.75rem;
        flex-wrap: wrap;

        .stats-flex {
          flex: 0 0 33.33%;

          .stats-item {
            width: 100%;
            font-size: 0.6875rem;
            font-weight: bold;
            color: #696969;
            text-align: center;

            &:nth-child(1) {
              margin-bottom: 1.5rem;
            }

            .price {
              font-size: 0.8125rem;
              color: #f14e4e;
              margin-bottom: 0.625rem;
            }
          }
        }
      }
    }

    .popularize {
      background-color: #fff;
      border-radius: 0.3125rem;
      padding: 0.8125rem 0.875rem 0.8438rem 0.8125rem;
      margin-bottom: 0.625rem;

      .shop-quantity {
        font-size: 0.8125rem;
        font-weight: bold;
        color: #666;
        margin-top: 0.6563rem;
      }

      .popularize-content {
        .quantity-right {
          font-size: 0.6875rem;
          color: #878787;

          .icon-member-bottom {
            font-weight: 400;
            margin-left: 0.125rem;
          }
        }

        .group,
        .client {
          font-size: 0.875rem;
          font-weight: bold;
          color: #383838;
          margin-top: 0.625rem;
          text-align: left;

          span {
            color: #ff3c02;
          }
        }
      }
    }
  }
}

.business-popup {
  .popup-header {
    color: #3b3b4a;
    margin: 1.25rem 0 1.875rem 0;

    .title {
      text-align: center;
      font-size: 1rem;
      position: relative;
    }

    .icon-guanbi {
      font-size: 0.875rem;
      color: #3b3b4a;
      position: absolute;
      right: 1.4375rem;
    }
  }

  .business-list {
    padding: 0 0.9375rem 0.7813rem 0.9375rem;

    .business-item {
      margin-bottom: 1.5625rem;

      .merchant-name {
        margin-left: 0.4375rem;
        font-size: 0.9375rem;
        color: #2d2d2d;
        text-align: left;
      }

      .merchant-to {
        width: 3.2188rem;
        height: 1.4375rem;
        line-height: 1.4375rem;
        text-align: center;
        background: linear-gradient(90deg, #ff6a3f 0%, #ff3b01 100%);
        border-radius: 0.1875rem;
        font-size: 0.75rem;
        color: #fff;
      }
    }
  }
}

.distance-main {
  background-color: #fff;
  padding: 1.3125rem 0.8438rem 0.8125rem 0.8125rem;

  .distance-head {
    .cancel {
      font-size: 0.75rem;
      color: #aaaab3;
    }

    .affirm {
      font-size: 0.75rem;
      color: #3b3b4a;
    }
  }

  .title {
    font-size: 1rem;
    font-weight: 600;
    color: #3b3b4a;
  }

  .distance-content {
    flex-wrap: wrap;
    margin-top: 1.5625rem;

    .distance-item {
      flex: 0 0 25%;
      margin-right: 0.9375rem;

      div {
        font-size: 0.875rem;
        color: #6e6e79;
        background: #f0f0f1;
        border-radius: 1.5625rem;
        padding: 0.375rem 1.2188rem 0.375rem 1.2188rem;

        &:nth-child(1) {
          margin-bottom: 1.0938rem;
        }
      }

      .on {
        background-color: rgba(241, 78, 78, 0.1);
        color: #f14e4e;
      }
    }
  }

  .coupon-content {
    margin: 1.5625rem 0.1563rem 2.5rem 0.1563rem;

    .weui-input {
      width: 100%;
      border: 0.0625rem solid #e3e3e3;
      padding: 0.5rem 0 0.5rem 0.625rem;
    }
  }
}

.business-swiper,
.swiper-item {
  width: 100%;
  // height: 10rem;
}
// .swiper-itemH {
//   height: 100%;
// }
.swiper-item img {
  max-width: 100%;
  width: 100%;
  max-height: 100%;

  /* height: 160rpx; */
  background: #fff;
  border-radius: 10rpx;
}
</style>
